<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="车辆ID" prop="cheliangId">
      <el-input v-model.number="form.cheliangId" placeholder="请输入车辆ID" />
    </el-form-item>
    <el-form-item label="用户ID" prop="userId">
      <el-input v-model.number="form.userId" placeholder="请输入用户ID" />
    </el-form-item>
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker
        v-model="form.startTime"
        type="datetime"
        placeholder="选择开始时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="结束时间" prop="endTime">
      <el-date-picker
        v-model="form.endTime"
        type="datetime"
        placeholder="选择结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" placeholder="请输入备注信息" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交预约</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { addYuyue } from '@/api/yuyue'
import type { Yuyue } from '@/types/yuyue'
import { ElMessage } from 'element-plus'

const formRef = ref()
const form = reactive<Yuyue>({
  cheliangId: 0,
  userId: 0,
  startTime: '',
  endTime: '',
  remark: ''
})

const rules = {
  cheliangId: [
    { required: true, message: '请输入车辆ID', trigger: 'blur' },
    { type: 'number', message: '车辆ID必须为数字', trigger: 'blur' }
  ],
  userId: [
    { required: true, message: '请输入用户ID', trigger: 'blur' },
    { type: 'number', message: '用户ID必须为数字', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ]
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    const res = await addYuyue(form)
    if (res.data.code === 200) {
      ElMessage.success('预约成功')
      formRef.value.resetFields()
    } else {
      ElMessage.error(res.data.message || '预约失败')
    }
  } catch (error) {
    ElMessage.error('预约提交失败')
  }
}
</script>
